<template>
	<div>
		<div v-for="(comment, index) in childComments" :key="index">
			<div style="display: flex; gap: 0.75em; padding: 1em 0px;">
				<img :src="comment.img||comment.image|| 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" alt=""
					style="width: 40px; height: 40px; border-radius: 50%; ">
				<div style="flex:1 1 0%">
					<div style="display: flex; align-items: center; gap: 0.75em;">
						<div style="font-weight: 500; font-size: 0.875em;"> {{ comment.userName||comment.name }}</div>
						<!-- <div style="font-weight: 500; font-size: 0.875em;">回复 {{ parentComment.userName||parentComment.name }}</div> -->
						<div style="font-size: 0.75em; line-height: 1em;">{{ comment.time }}</div>
					</div>
					<div style="margin-top: 0.5em;">{{ comment.content }}</div>
					<div style="display: flex; margin-top: 0.5em; align-items: center; gap: 0.9em;"><span> <span style="color: black;" :class="'heart'+comment.id" @click.self="handleClick(comment.id)">♥ </span> 点赞</span>
						<i class="el-icon-chat-dot-round" @click="handle(index)" style="cursor: pointer;"></i><span style="margin-left: -10px;" >回复</span></div>
						<formView :commentId="comment.id" v-if="activeIndex==index" @load="handleLoad" ></formView>
						
				</div>
				
				
			</div>
			<ChildComment :childComments="comment.child" :parentComment="comment" @load="handleLoad" v-if="comment.child">
			</ChildComment>
		</div>


	</div>
</template>

<script>
    import ChildComment from './childComment.vue';
	import formView from './formView.vue';
    export default{
        components:{
            ChildComment,
			formView,
        },
		heart:{},
		props:{
			childComments:Array,
			parentComment:Object,
		},
        name:"ChildComment",
      
		mounted(){
			
		},
	data() {
		return {
			isStar: false,
			activeIndex: null,
			heart: {color:''}
		}
	},
		methods:{
			handleLoad(){
                this.$emit('load');
				this.activeIndex=null
            },
			handle(index){
                if(this.activeIndex==index){
                    this.activeIndex=null
                }
                else{
                    this.activeIndex=index
                }
            },
			handleClick(id){
                if(document.querySelector('.heart'+id).style.color=='black'){
                    document.querySelector('.heart'+id).style.color='red'
                }
                else{
                    document.querySelector('.heart'+id).style.color='black'
                }
			},
		}
    }
</script>